<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="userName" placeholder="请输入用户名、帐号搜索"></el-input>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker v-model="datePicker" type="daterange" align="left" unlink-panels format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="pickerChange" :picker-options="pickerOptions" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="_list">
      <el-table highlight-current-row @selection-change="handleSelectionChange" :data="dataList" style="width: 100%" v-loading.body="listLoading" :height="$tools.tableHeight()">
        <el-table-column align="center" width="20"> </el-table-column>
        <el-table-column label="用户信息" width="200">
          <template slot-scope="scope">
            <div class="user_info">
              <div class="thumbnail">
                <img :src="scope.row.avatar ? scope.row.avatar : '/static/images/avatar_user.png'" />
              </div>
              <div class="info">
                <div class="_name">{{ scope.row.nickName }}</div>
                <div>{{ scope.row.mobile }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="提现平台" align="center">
          <template slot-scope="scope">
            {{ scope.row.platform === 'WX_PAY' ? '微信' : '支付宝' }}
          </template>
        </el-table-column>
        <el-table-column label="提现姓名" prop="userName" align="center"></el-table-column>
        <el-table-column label="提现账号" prop="account" align="center" width="150"></el-table-column>
        <el-table-column label="申请提现金额" align="center" width="100">
          <template slot-scope="scope">￥{{ scope.row.amount ? scope.row.amount / 100 : '-' }}</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 'APPLY'" type="danger">申请中</el-tag>
            <el-tag v-if="scope.row.status === 'DEALWITH'" type="info">处理中</el-tag>
            <el-tag v-if="scope.row.status === 'WITHDRAW'" type="success">已提现</el-tag>
            <el-tag v-if="scope.row.status === 'FAILED'" type="danger">提现失败</el-tag>
            <el-tag v-if="scope.row.status === 'REFUSE'" type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" width="180">
          <template slot-scope="scope">{{ scope.row.createTime | formatDate }}</template>
        </el-table-column>
        <el-table-column label="提现时间" align="center" width="180">
          <template slot-scope="scope">{{ scope.row.modifyTime | formatDate }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status === 'APPLY'" @click="withdrawApply('DEALWITH', '提现', scope.row)">去提现</el-button>
            <template v-if="scope.row.status === 'DEALWITH'">
              <el-button type="text" @click="withdrawApply('WITHDRAW', '提现', scope.row)">确认提现</el-button>
              <el-button type="danger" @click="withdrawApply('FAILED', '拒绝提现', scope.row)">拒绝提现</el-button>
            </template>
            <el-button type="text" v-if="scope.row.status === 'WITHDRAW'">已提现</el-button>
            <el-button type="text" v-if="scope.row.status === 'FAILED' || scope.row.status === 'REFUSE'" @click="withdrawApply('WITHDRAW', '重新提现', scope.row)">重新提现</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages" v-if="total > 0">
      <div class="right">
        <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import mixinsTable from '@/util/mixins.table';
export default {
  name: 'withdrawalList',
  mixins: [mixinsTable],
  data () {
    return {
      userName: '',
      searchField: 'userName',
      APISERVER: 'withdrawList'
    };
  },
  created () {
    this.getList();
  },
  methods: {
    withdrawApply (status, state, row) {
      this.$confirm(`确认${state}吗？`, '提示', { type: 'warning' }).then(() => {
        this.$API.withdrawApply(row.id, { status }).then(res => {
          if (res.code === 200) {
            this.getList();
            this.$message.success('操作完成');
          } else {
            this.$message.error(res.message);
          }
        });
      });
    }
  }
};
</script>
